<template>
    <div class="register">
        <el-card class="register-box-card">
            <el-form  label-width="80px" :model="form" ref="form">
                <el-form-item label="邮箱" class="label1" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                
                <el-form-item label="验证码" class="label2" prop="checkCode">
                    <el-input class="checkCode-input" v-model="form.checkCode"></el-input>
                    <el-button class="sendCheckCode-button" @click="sendCheckCode" type="text">发送验证码</el-button>

                </el-form-item>

                <el-form-item >   
                    <el-button class="registerButton" type="primary" @click="judgeCheckCode">下一步</el-button>
                    <el-button class="jumpToLogin"  @click="jumpTologin" >返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default{
    components:{

    },

    data(){
        return {
            rigthCheckCode:'',
            form:{
                email:"",
                checkCode:''
            },
        }
    },
    methods:{
        register(){

        },
        jumpTologin(){
            this.$router.push('/login')
        },
        sendCheckCode(){
            if(this.form.email==''){
                this.$message.error('请输入邮箱');
                return 
            }
            this.$axios.get("http://localhost:8000/register/sendEmail",{
                params:{
                    email:this.form.email
                }
            })
            .then(res => {
                    console.log(res.data)
                    this.rigthCheckCode = res.data
                })
            .catch(err => {
                    console.log(err.response.data.message)
                    var errorInfo = err.response.data.message
                    this.$message.error(errorInfo)
            })
        },
        judgeCheckCode(){
            if(this.form.checkCode==''||this.form.checkCode!=this.rigthCheckCode){
                this.$message.error("验证码不正确!")
                return 
            }else{
                console.log(this.form.email)
                this.$router.push({
                    name:"setUserInfo",
                    params:{email:this.form.email}
                })
            }
        } 
    }
    
}
</script>

<style lang="scss">
.register{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;

    .register-box-card{
        width: 450px;
        margin: auto;
        .label1{
            position: relative;
            right: 20px;
        }
        .label2{
            position: relative;
            right: 20px;
            .checkCode-input{
                width: 150px;
                position: relative;
                right: 0px;
            }
            .sendCheckCode-button{
                width:90px;
                position: relative;
                left:45px;

                text-align: center;
            }
            
        }
        .label3{
            position: relative;
            right: 20px;
        }
        .registerButton{
            position: relative;
            right: 60px;
        }
    }
}
</style>